<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style media="screen">
     .form{
       position:absolute;
       top:100px;
       right:100px;
     }

    </style>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"  />
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
 </head>
 <body>
  <div class="row">
   <div class="col-md-1"></div>
   <div class="col-md-10">
    <div class="">
     <img src="/imgs/guazi.png" width="400px" height="150px" style="margin-left:85px;" alt="" />
    </div>
    <div class="container">
     <div class="row">
      <div class="col-md-10 col-md-offset-1">
       <img src="/imgs/kai.jpg" height="50%" alt="" />
       <div class="form">


        <form class="form-horizontal" action="" method="post">
        {!!csrf_field()!!}
         <div class="form-group">
          <label for="inputEmail3"  class="col-sm-4 control-label">用户名:</label>
          <div class="col-sm-8">
           <input type="text" name="username" class="form-control" id="usernaem" placeholder="用户名" />
            @if($errors->has('username'))
             <p style="color:red">{{$errors->first('username')}}</p>
           @endif
          </div>
         </div>

         <div class="form-group">
          <label for="inputPassword3" class="col-sm-4 control-label">密码:</label>
          <div class="col-sm-8">
           <input type="password" name="password" class="form-control" id="inputPassword3" placeholder="密码" />
           @if($errors->has('password'))
             <p style="color:red">{{$errors->first('password')}}</p>
           @endif
          </div>
         </div>

        <div class="form-group">
          <label for="imgcode" class="col-sm-4 control-label">验证码:</label>
          <div class="col-sm-4">
           <input type="text" name="imgcode" class="form-control" id="imgcode" placeholder="验证码" />
            @if($errors->has('imgcode'))
             <p style="color:red">{{$errors->first('imgcode')}}</p>
           @endif
           @if($errors->has('yanzhengma'))
             <p style="color:red">{{$errors->first('yanzhengma')}}</p>
           @endif
          </div>
          <img src="{{url('auth/captcha')}}" name="imgc" id="imgc" alt="换一张" class="get-code" height="36" width="100" onclick="this.src='{{url('auth/captcha')}}?'+Math.random()">
           
         </div>



         <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
           <div class="checkbox">
            <label> <input type="checkbox" id="rem" name="remember" /> 是否记住密码 </label>
           </div>
          </div>
         </div>
         <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
           <button type="submit" class="btn btn-success" style="margin-right: 25px">登陆</button>
           <a href="/auth/register"><button type="button" class="btn btn-warning">注册</button></a>
          </div>
         </div>

        </form>

       </div>
      </div>
     </div>
    </div>
   </div>
   <div class="col-md-1"></div>
  </div>
 </body>
 <script type="text/javascript">
    var inputs = document.getElementsByTagName('input');
        if (localStorage.getItem('username') && localStorage.getItem('password')) {
            inputs[1].value = localStorage.getItem('username');
            inputs[2].value = localStorage.getItem('password');
            inputs[4].checked = true;
        }

        inputs[4].onclick = function(){
            //防止用户没有填写用户名或密码点击保存
            if (inputs[1].value == '' || inputs[2].value == '') {
                alert("请先填写用户名或密码");
                inputs[4].checked = false;
            }else{
                //如果是保存，将用户输入的值存入localStorage
                if (inputs[4].checked) {
                    localStorage.setItem('username',inputs[1].value);
                    localStorage.setItem('password',inputs[2].value);
                //如果不保存，删除localStorage中的值
                }else{
                    localStorage.removeItem('username');
                    localStorage.removeItem('password');
                }   
            }
        }
 </script>
</html>
